<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/home" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                团购优惠
            </h1>
        </header>
        <main>
            <div class="discounts" v-for="el in dataArr" :key="el.id">
                <img class="mb20" :src="el.image" alt="">
                <div>
                    <span class="f25">{{ el.content }}</span>
                    <a @click="goDetails(el.id)">详情</a>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import {groupBuying} from '@/api/using';

export default {
    data() {
        return {
            dataArr: []
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            groupBuying()
            .then(r => {
                this.dataArr = r.data;
            })
            .catch(e => {
            })
        },
        goDetails(id) {
            this.$router.push({
                path: '/using/offerDetails',
                query: {
                    id: id
                }
            })
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    height: 434rem;
    padding-top: 60rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main {
    padding: 0 20rem;
}

main .discounts {
    position: relative;
    top: -290rem;
    border-radius: 20rem;
    background-color: #fff;
    padding: 40rem 30rem 40rem 32rem;
    margin-bottom: 20rem;
}

main .discounts img {
    width: 100%;
}

main .discounts span {
    display: inline-block;
    width: 230rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main .discounts a {
    position: relative;
    float: right;
    font-size: 22rem;
    color: #808080;
    padding-right: 38rem;
}

main .discounts a::after {
    content: "";
    width: 11rem;
    height: 21rem;
    position: absolute;
    background: url(../../../assets/img/car-refuel/arrows.png) no-repeat;
    background-size: 100%;
    top: 50%;
    right: 17rem;
    transform: translateY(-50%);
}</style>